<template>
  <div class="home h100">
    <header>标题</header>
    <main>
      6666
      <router-view></router-view>
    </main>
    <footer>
      <!-- router-link 必须加to -->
      <!-- tag(指定router-link 变成什么标签) -->
      <!-- exact  精准匹配 -->
      <!-- active-class 自动添加class名 -->
      <router-link active-class="col" tag="span" to="/home/three"
        >首页</router-link
      >
      <router-link active-class="col" tag="span" to="/home/One"
        >我的</router-link
      >
      <router-link active-class="col" tag="span" to="/home/Two"
        >列表</router-link
      >
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style>
.home {
  display: flex;
  flex-direction: column;
}
header {
  text-align: center;
  line-height: 46px;
}
main {
  flex: 1;
}
footer {
  text-align: center;
  line-height: 46px;
  display: flex;
  justify-content: space-around;
}
.col {
  color: red;
}
</style>
